<template>
	<view>
		<button open-type="chooseAvatar" @chooseavatar="onChooseAavtar">
			<!-- <image :src="userInfo.avatar" mode=""></image> -->
			选择头像
		</button>
		<!-- <input class="input" type="nickname" v-model="userInfo.nickName" />
		<button @click="onUpdateUserInfo">保存</button> -->
	</view>
</template>

<script setup>
	import { ref, watchEffect, watch } from 'vue';
	import { useUserStore } from '../../store/user';
	import { updateUserInfoApi } from '../../api/user';

	const userStore = useUserStore();

	const userInfo = ref({
		nickName: '',
		avatar: '',
	});

	// 侦听仓库中userInfo的变化（立即执行侦听）
	watch(() => userStore.userInfo, () => {
		// 进入if，则表示仓库中的userInfo有值了
		if (userStore.userInfo) {
			// 将仓库中的用户信息，赋值给组件内部的ref数据，实现数据回显
			userInfo.value = { ...userStore.userInfo }
		}
	}, { immediate: true })

	const onChooseAavtar = (event) => {
		// 获取到用户选择的图片的临时地址，实现图片回显
		userInfo.value.avatar = event.detail.avatarUrl;

		// 将临时图片上传到服务器，进行永久存储
		uni.uploadFile({
			url: 'http://nocat.life:3017/images/upload',
			filePath: event.detail.avatarUrl, // 要上传的图片的临时路径
			name: 'file', // 要上传的文件属性名（需要和后端保持一致）
		}).then(res => {
			const response = JSON.parse(res.data);
			if(response.code == 200) {
				userInfo.value.avatar = response.data;
			}
		})
	}

	const onUpdateUserInfo = () => {

		updateUserInfoApi({
			// ...userStore.userInfo,
			_id: userStore.userInfo._id,
			...userInfo.value
		}).then(res => {
			if (res.code == 200) {
				// 确认修改成功后，重新发送请求获取数据库中最新的用户信息，更新到仓库
				userStore.getUserInfoAction();

				uni.navigateBack({
					delta: 1
				})
			}
		})
	}
</script>

<style>
	.input {
		border: 1px solid;
	}
</style>